<template lang="">
    <div class="layout-box">
        <div class="banner-box"></div>
        <div class="bottom-box">
            <div class="left-box">left</div>
            <div class="right-box">
                <div class="content-box">
                   <div class="ab-box">
                        <slot />
                   </div>
                </div>
                <div class="foot-box">
                    石家庄财经职业学院 版权所有 冀ICP备xxxxxxxxx号 © 2013-2025 Corporation,All Rights Reserved
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    .layout-box{
        height: 100vh;
        background-color: red;
        --banner-hight: 92px;
        .banner-box{
            height: var(--banner-hight);
            background-color: green;
        }
        .bottom-box{
            background-color: bisque;
            height: calc(100% - var(--banner-hight));
            display: flex;
            .left-box{
                background-color: orange;
                width: 288px;
            }
            .right-box{
                background-color: aquamarine;
                flex: 1;
                display: flex;
                flex-direction: column;
                .content-box{
                    background-color: #fff;
                    flex: 1;
                    position: relative;
                    .ab-box{
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        background: red;
                        overflow: auto;
                    }
                }
                .foot-box{
                    background-color: beige;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

        }
    }
</style>